<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
        <div class="flex-1 min-w-0">
            <!-- Breadcrumbs -->
            <div class="flex flex-wrap items-center font-medium">
                <div>
                    <a class="whitespace-nowrap text-primary-500">User Interface</a>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
                    Cards
                </h2>
            </div>
        </div>
    </div>

    <!-- Main -->
    <div class="flex-auto p-6 sm:p-10">

        <div class="mb-6 sm:mb-12">
            <mat-button-toggle-group
                class="flex flex-wrap -m-2"
                [(ngModel)]="selectedFilter"
                (change)="onFilterChange($event)">
                <ng-container *ngFor="let filter of filters">
                    <mat-button-toggle
                        class="m-2"
                        [value]="filter">
                        <span class="text-secondary">{{filter | titlecase}}</span>
                        <span class="ml-1.5 font-medium text-secondary">({{numberOfCards[filter]}})</span>
                    </mat-button-toggle>
                </ng-container>
            </mat-button-toggle-group>
        </div>

        <div class="flex flex-wrap items-start w-full max-w-400 -m-4">

            <!-- Card #1 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-article">
                <img
                    class="object-cover"
                    src="assets/images/cards/01-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8">
                    <div class="text-2xl font-semibold leading-tight">Most beautiful and quite places to see</div>
                    <div class="mt-4">From rocky mountains to crystal clear lakes, there are the places you must see and enjoy.</div>
                </div>
            </fuse-card>


            <!-- Card #2 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-article">
                <img
                    class="object-cover"
                    src="assets/images/cards/02-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8">
                    <div class="text-2xl font-semibold leading-tight">Rocky mountain tops</div>
                    <div class="text-secondary text-md mt-1">Updated with 20 new locations</div>
                    <div class="mt-4">From rocky mountains to crystal clear lakes, there are the places you must see and enjoy.</div>
                </div>
            </fuse-card>


            <!-- Card #3 - Flippable card -->
            <fuse-card
                class="flex flex-col max-w-80 w-full filter-article filter-interactive"
                [flippable]="true"
                [face]="'front'"
                #flippableCard01="fuseCard">
                <ng-container fuseCardFront>
                    <img
                        class="object-cover"
                        src="assets/images/cards/03-320x200.jpg"
                        alt="Card cover image">
                    <div class="m-8 mb-4">
                        <div class="text-2xl font-semibold leading-tight">Most beautiful and quite places to see</div>
                        <div class="mt-4">From rocky mountains to crystal clear lakes, there are the places you must see and enjoy.</div>
                        <div class="mt-3 -mx-3">
                            <button
                                class="px-3"
                                mat-button
                                [color]="'primary'"
                                (click)="flippableCard01.face = flippableCard01.face === 'front' ? 'back' : 'front'">
                                Read More
                            </button>
                        </div>
                    </div>
                </ng-container>
                <ng-container fuseCardBack>
                    <div class="flex flex-col flex-auto m-4">
                        <button
                            class="ml-1.5"
                            mat-icon-button
                            (click)="flippableCard01.face = flippableCard01.face === 'front' ? 'back' : 'front'">
                            <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
                        </button>
                        <div class="m-4 mt-3">
                            <div class="text-2xl font-semibold leading-tight">
                                Most beautiful and quite places to see
                            </div>
                            <div class="mt-4">
                                From rocky mountains to crystal clear lakes, these are the places you must see and enjoy.
                                You can bring your own food and have a little picnic on top of the amazing grasslands.
                            </div>
                            <div class="mt-4">
                                From rocky mountains to crystal clear lakes, these are the places you must see and enjoy.
                                You can bring your own food and have a little picnic on top of the amazing grasslands.
                            </div>
                        </div>
                    </div>
                </ng-container>
            </fuse-card>


            <!-- Card #4 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-article">
                <img
                    class="object-cover"
                    src="assets/images/cards/04-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8 mb-4">
                    <div class="text-2xl font-semibold leading-tight">Rocky mountain tops</div>
                    <div class="text-secondary text-md mt-1">Updated with 20 new locations</div>
                    <div class="mt-4">From rocky mountains to crystal clear lakes, there are the places you must see and enjoy.</div>
                    <div class="mt-3 -mx-3">
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Read More
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #5 - Expandable card -->
            <fuse-card
                class="flex flex-col max-w-80 w-full filter-article filter-interactive"
                #expandableCard01="fuseCard">
                <img
                    class="object-cover"
                    src="assets/images/cards/05-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8 mb-4">
                    <div class="text-2xl font-semibold leading-tight">Rocky mountain tops</div>
                    <div class="text-secondary text-md mt-1">Updated with 20 new locations</div>
                    <div class="mt-4">From rocky mountains to crystal clear lakes, there are the places you must see and enjoy.</div>
                    <div class="mt-3 -mx-3">
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            (click)="expandableCard01.expanded = !expandableCard01.expanded">
                            <span class="mr-1">Details</span>
                            <mat-icon
                                class="icon-size-5 transform transition-transform ease-in-out duration-150 rotate-0"
                                [ngClass]="{'rotate-180': expandableCard01.expanded}"
                                [svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
                        </button>
                    </div>
                </div>

                <ng-container fuseCardExpansion>
                    <div class="m-8 mt-0">
                        <div class="flex items-baseline">
                            <div class="mr-2">Open now:</div>
                            <div class="text-secondary">08:00AM - 09:00PM</div>
                        </div>
                        <div class="flex items-baseline mt-1">
                            <div class="mr-2">Entrance fee:</div>
                            <div class="text-secondary">$20 (USD)</div>
                        </div>
                    </div>
                </ng-container>
            </fuse-card>


            <!-- Card #6 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-article">
                <img
                    class="object-cover"
                    src="assets/images/cards/03-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8">
                    <div class="text-md font-semibold leading-none tracking-wide text-primary mb-1">TRAVEL</div>
                    <div class="text-2xl font-semibold leading-tight">Most beautiful and quite places to see</div>
                    <div class="flex items-center mt-6">
                        <img
                            class="w-10 h-10 rounded-full"
                            src="assets/images/cards/avatar-400x400.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col ml-3">
                            <span class="font-medium leading-none">Galen Lewis</span>
                            <span class="text-sm text-secondary leading-none mt-1">23 hours ago</span>
                        </div>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #7 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-article">
                <img
                    class="object-cover"
                    src="assets/images/cards/06-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8 text-2xl font-semibold leading-tight">Most beautiful and quite places to see</div>
            </fuse-card>


            <!-- Card #8 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-article">
                <img
                    class="object-cover"
                    src="assets/images/cards/07-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8">From rocky mountains to crystal clear lakes, there are the places you must see and enjoy.</div>
            </fuse-card>


            <!-- Card #9 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-article">
                <img
                    class="object-cover"
                    src="assets/images/cards/08-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8">
                    <div class="text-2xl font-semibold leading-tight">Rocky mountain tops</div>
                    <div class="text-secondary text-md mt-1">Updated with 20 new locations</div>
                </div>
            </fuse-card>


            <!-- Card #10 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-article">
                <img
                    class="object-cover"
                    src="assets/images/cards/09-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8 mb-4">
                    <div class="text-2xl font-semibold leading-tight">Most beautiful and quite places to see</div>
                    <div class="mt-3 -mx-3">
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Read More
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #11 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-article">
                <img
                    class="object-cover"
                    src="assets/images/cards/10-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8 mb-4">
                    <div class="text-2xl font-semibold leading-tight">Rocky mountain tops</div>
                    <div class="text-secondary text-md mt-1">Updated with 20 new locations</div>
                    <div class="mt-3 -mx-3">
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Read More
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #12 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-article">
                <div class="m-8 mb-4">
                    <div class="text-2xl font-semibold leading-tight">Most beautiful and quite places to see</div>
                    <div class="mt-4">
                        From rocky mountains to crystal clear lakes, these are the places you must see and enjoy.
                        In summers you can bring your food and have a little picnic on top of the amazing grasslands.
                        In winters you can still enjoy them but with couple of inches snow on top of those grasslands.
                    </div>
                    <div class="mt-3 -mx-3">
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Read More
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #13 -->
            <fuse-card class="flex flex-col max-w-80 w-full p-8 filter-article">
                <div class="text-2xl font-semibold leading-tight">Most beautiful and quite places to see</div>
                <div class="mt-4">
                    From rocky mountains to crystal clear lakes, these are the places you must see and enjoy.
                    In summers you can bring your food and have a little picnic on top of the amazing grasslands.
                    In winters you can still enjoy them but with couple of inches snow on top of those grasslands.
                </div>
            </fuse-card>


            <!-- Card #14 -->
            <fuse-card class="flex flex-col max-w-80 w-full p-8 filter-article">
                <div class="text-2xl font-semibold leading-tight">Rocky mountain tops</div>
                <div class="text-secondary text-md mt-1">Updated with 20 new locations</div>
                <div class="mt-4">
                    From rocky mountains to crystal clear lakes, these are the places you must see and enjoy.
                    In summers you can bring your food and have a little picnic on top of the amazing grasslands.
                    In winters you can still enjoy them but with couple of inches snow on top of those grasslands.
                </div>
            </fuse-card>


            <!-- Card #15 -->
            <fuse-card class="flex flex-col max-w-80 w-full p-8 pb-4 filter-article">
                <div class="flex items-center">
                    <img
                        class="w-20 rounded-lg object-cover"
                        src="assets/images/cards/13-160x160.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col ml-6">
                        <div class="text-2xl font-semibold leading-tight">Mountain tops</div>
                        <div class="text-secondary font-medium text-md">Travel locations</div>
                    </div>
                </div>
                <div class="mt-6">From rocky mountains to crystal clear lakes, these are the places you must see and enjoy.</div>
                <div class="mt-3 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        Read More
                    </button>
                </div>
            </fuse-card>


            <!-- Card #16 -->
            <fuse-card class="flex flex-col max-w-80 w-full p-8 pb-4 filter-article">
                <div class="flex items-center justify-between">
                    <div class="flex flex-col mr-6">
                        <div class="text-2xl font-semibold leading-tight">Mountain tops</div>
                        <div class="text-secondary font-medium text-md">Travel locations</div>
                    </div>
                    <img
                        class="w-20 rounded-lg object-cover"
                        src="assets/images/cards/13-160x160.jpg"
                        alt="Card cover image">
                </div>
                <div class="mt-6">From rocky mountains to crystal clear lakes, these are the places you must see and enjoy.</div>
                <div class="mt-3 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        Read More
                    </button>
                </div>
            </fuse-card>


            <!-- Card #17 -->
            <fuse-card class="flex flex-col md:flex-row max-w-80 md:max-w-160 w-full filter-article">
                <div class="flex-0 w-80 md:w-64">
                    <img
                        class="w-full h-full object-cover"
                        src="assets/images/cards/11-512x512.jpg"
                        alt="Card cover image">
                </div>
                <div class="flex flex-col flex-auto m-8 mb-4">
                    <div class="text-2xl font-semibold leading-tight">Mountain tops and clear lakes</div>
                    <div class="text-secondary font-medium text-md mt-1">Updated with 20 new locations</div>
                    <div class="mt-4">
                        From rocky mountains to crystal clear lakes, these are the places you must see and enjoy.
                        You can bring your own food and have a little picnic on top of the amazing grasslands.
                    </div>
                    <div class="mt-3 -mx-3">
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Read More
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #18 -->
            <fuse-card class="flex flex-col md:flex-row max-w-80 md:max-w-160 w-full filter-article">
                <div class="flex flex-col flex-auto order-2 md:order-1 m-8 mb-4">
                    <div class="text-2xl font-semibold leading-tight">Mountain tops and clear lakes</div>
                    <div class="text-secondary font-medium text-md mt-1">Updated with 20 new locations</div>
                    <div class="mt-4">
                        From rocky mountains to crystal clear lakes, these are the places you must see and enjoy.
                        You can bring your own food and have a little picnic on top of the amazing grasslands.
                    </div>
                    <div class="mt-3 -mx-3">
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Read More
                        </button>
                    </div>
                </div>
                <div class="flex-0 w-80 md:w-64">
                    <img
                        class="order-1 md:order-2 w-full h-full object-cover"
                        src="assets/images/cards/12-512x512.jpg"
                        alt="Card cover image">
                </div>
            </fuse-card>


            <!-- Card #19 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-listing">
                <img
                    class="object-cover"
                    src="assets/images/cards/coffee-shop-01-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8 mb-4">
                    <div class="text-2xl font-semibold leading-tight">Puzzles Coffee Shop</div>
                    <div class="flex items-center leading-none mt-2 -ml-1">
                        <div class="flex items-center">
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star_half'"></mat-icon>
                        </div>
                        <div class="text-secondary ml-2">4.5</div>
                        <div class="text-secondary mx-2">&bull;</div>
                        <div class="text-secondary">98 reviews</div>
                    </div>
                    <div class="mt-6">
                        Puzzles coffee shop is one of the finest coffee shops in central downtown in New York.
                        It's quiet; far away from busy streets and never ending constructions.
                    </div>
                    <div class="flex items-center mt-3 -mx-3">
                        <button
                            class="px-3 mr-1"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Location
                        </button>
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Reviews
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #20 -->
            <fuse-card class="flex flex-col max-w-80 w-full p-8 pb-4 filter-listing">
                <div class="text-2xl font-semibold leading-tight">Puzzles Coffee Shop</div>
                <div class="flex items-center leading-none mt-2 -ml-1">
                    <div class="flex items-center">
                        <mat-icon
                            class="text-orange-500 icon-size-5"
                            [svgIcon]="'mat_outline:star'"></mat-icon>
                        <mat-icon
                            class="text-orange-500 icon-size-5"
                            [svgIcon]="'mat_outline:star'"></mat-icon>
                        <mat-icon
                            class="text-orange-500 icon-size-5"
                            [svgIcon]="'mat_outline:star'"></mat-icon>
                        <mat-icon
                            class="text-orange-500 icon-size-5"
                            [svgIcon]="'mat_outline:star'"></mat-icon>
                        <mat-icon
                            class="text-orange-500 icon-size-5"
                            [svgIcon]="'mat_outline:star_half'"></mat-icon>
                    </div>
                    <div class="text-secondary ml-2">4.5</div>
                    <div class="text-secondary mx-2">&bull;</div>
                    <div class="text-secondary">98 reviews</div>
                </div>
                <div class="mt-6">
                    Puzzles coffee shop is one of the finest coffee shops in central downtown in New York. It's quiet; far away from busy streets and never ending constructions.
                </div>
                <div class="flex items-center mt-3 -mx-3">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        Location
                    </button>
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        Reviews
                    </button>
                </div>
            </fuse-card>


            <!-- Card #21 -->
            <fuse-card class="flex flex-col md:flex-row max-w-80 md:max-w-160 w-full filter-listing">
                <div class="flex-0 w-80 md:w-64">
                    <img
                        class="w-full h-full object-cover"
                        src="assets/images/cards/coffee-shop-02-512x512.jpg"
                        alt="Card cover image">
                </div>
                <div class="flex flex-col flex-auto m-8 mb-4">
                    <div class="text-2xl font-semibold leading-tight">Puzzles Coffee Shop</div>
                    <div class="flex items-center leading-none mt-2 -ml-1">
                        <div class="flex items-center">
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star_half'"></mat-icon>
                        </div>
                        <div class="text-secondary ml-2">4.5</div>
                        <div class="text-secondary mx-2">&bull;</div>
                        <div class="text-secondary">98 reviews</div>
                    </div>
                    <div class="mt-6">
                        Puzzles coffee shop is one of the finest coffee shops in central downtown in New York.
                        It's quiet; far away from busy streets and never ending constructions.
                    </div>
                    <div class="flex items-center mt-3 -mx-3">
                        <button
                            class="px-3 mr-1"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Location
                        </button>
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Reviews
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #22 -->
            <fuse-card class="flex flex-col md:flex-row justify-between max-w-80 md:max-w-160 w-full p-8 pb-4 filter-listing">
                <div class="flex flex-col flex-auto order-2 md:order-1">
                    <div class="text-2xl font-semibold leading-tight">Puzzles Coffee Shop</div>
                    <div class="flex items-center leading-none mt-2 -ml-1">
                        <div class="flex items-center">
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star'"></mat-icon>
                            <mat-icon
                                class="text-orange-500 icon-size-5"
                                [svgIcon]="'mat_outline:star_half'"></mat-icon>
                        </div>
                        <div class="text-secondary ml-2">4.5</div>
                        <div class="text-secondary mx-2">&bull;</div>
                        <div class="text-secondary">98 reviews</div>
                    </div>
                    <div class="mt-6">
                        <div class="flex flex-wrap items-center text-secondary my-1">
                            <span>$$</span>
                            <span class="mx-2">&bull;</span>
                            <span class="whitespace-nowrap">Arabian, Brazilian, Colombian</span>
                        </div>
                        <div class="flex items-center text-secondary my-1">
                            <span>774 Riverview St.</span>
                        </div>
                        <div class="flex flex-wrap items-center text-secondary my-1">
                            <span>Open</span>
                            <span class="mx-2">&bull;</span>
                            <span class="whitespace-nowrap">07:00AM Weekdays</span>
                            <span class="mx-2">&bull;</span>
                            <span class="whitespace-nowrap">10:00AM Weekends</span>
                        </div>
                    </div>
                    <div class="flex items-center mt-3 -mx-3">
                        <button
                            class="px-3 mr-1"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Location
                        </button>
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Reviews
                        </button>
                    </div>
                </div>
                <div class="order-1 md:order-2 w-full md:w-40 md:ml-6 mb-8 md:mb-4 rounded-lg overflow-hidden">
                    <img
                        class="w-full h-full object-cover"
                        src="assets/images/cards/coffee-shop-03-320x320.jpg"
                        alt="Card cover image">
                </div>
            </fuse-card>


            <!-- Card #23 -->
            <fuse-card class="flex flex-col max-w-80 w-full px-8 pt-6 pb-4 filter-list">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">News</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard01Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard01Menu="matMenu">
                            <button mat-menu-item>Mark all as read</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col mt-5">
                    <div class="flex">
                        <mat-icon
                            class="icon-size-5 mt-0.5 mr-2"
                            [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                        <div><b>20% OFF</b> in your favorite hats shop on next Friday.</div>
                    </div>
                    <div class="flex mt-5">
                        <mat-icon
                            class="icon-size-5 mt-0.5 mr-2"
                            [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                        <div>Upcoming meetups within 20 miles.
                            <a
                                class="text-secondary whitespace-nowrap hover:underline"
                                [routerLink]="['./']">See details
                            </a>
                        </div>
                    </div>
                    <div class="flex mt-5">
                        <mat-icon
                            class="icon-size-5 mt-0.5 mr-2"
                            [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                        <div>Concerts from your favorite bands available within 100 miles.
                            <a
                                class="text-secondary whitespace-nowrap hover:underline"
                                [routerLink]="['./']">See details
                            </a>
                        </div>
                    </div>
                </div>
                <div class="flex items-center mt-4 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        See all news
                    </button>
                </div>
            </fuse-card>


            <!-- Card #24 -->
            <fuse-card class="flex flex-col max-w-80 w-full px-8 pt-6 pb-4 filter-list">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Groups</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard02Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard02Menu="matMenu">
                            <button mat-menu-item>Search for groups</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col mt-5">
                    <div class="flex items-center">
                        <img
                            class="w-14 h-14 mr-4 rounded object-cover"
                            src="assets/images/cards/coffee-shop-01-320x200.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">The Port Cafe</div>
                            <div class="text-md truncate leading-none mt-1">Best cafe of the downtown New York</div>
                            <div class="text-md leading-none text-secondary mt-2">1.2k followers</div>
                        </div>
                    </div>
                    <div class="flex items-center mt-6">
                        <img
                            class="w-14 h-14 mr-4 rounded object-cover"
                            src="assets/images/cards/coffee-shop-02-512x512.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">Design House LLC.</div>
                            <div class="text-md truncate leading-none mt-1">UI/UX, brand and product design</div>
                            <div class="text-md leading-none text-secondary mt-2">957 followers</div>
                        </div>
                    </div>
                    <div class="flex items-center mt-6">
                        <img
                            class="w-14 h-14 mr-4 rounded object-cover"
                            src="assets/images/cards/coffee-shop-03-320x320.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">Crax Laser Tag</div>
                            <div class="text-md truncate leading-none mt-1">30% off with group of 6 people</div>
                            <div class="text-md leading-none text-secondary mt-2">342 followers</div>
                        </div>
                    </div>
                    <div class="flex items-center mt-6">
                        <img
                            class="w-14 h-14 mr-4 rounded object-cover"
                            src="assets/images/cards/sneakers-01-320x200.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">Roadster Clothing Inc.</div>
                            <div class="text-md truncate leading-none mt-1">$25 off on orders $500 and over</div>
                            <div class="text-md leading-none text-secondary mt-2">4.7k followers</div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center mt-6 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        See all groups
                    </button>
                </div>
            </fuse-card>


            <!-- Card #25 -->
            <fuse-card class="flex flex-col max-w-80 w-full px-8 pt-6 pb-4 filter-list">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Friend Suggestions</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard03Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard03Menu="matMenu">
                            <button mat-menu-item>Find friends</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col mt-5">
                    <div class="flex items-center">
                        <img
                            class="w-14 h-14 mr-4 rounded-full"
                            src="assets/images/avatars/female-01.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">Amelia Edwards</div>
                            <div class="text-md leading-none text-secondary mt-1">3 mutual friends</div>
                        </div>
                    </div>
                    <div class="flex items-center mt-6">
                        <img
                            class="w-14 h-14 mr-4 rounded-full"
                            src="assets/images/avatars/male-05.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">Lew Silverton</div>
                            <div class="text-md leading-none text-secondary mt-1">3 mutual friends</div>
                        </div>
                    </div>
                    <div class="flex items-center mt-6">
                        <img
                            class="w-14 h-14 mr-4 rounded-full"
                            src="assets/images/avatars/female-05.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">Leanne Simpson</div>
                            <div class="text-md leading-none text-secondary mt-1">Went to same high school</div>
                        </div>
                    </div>
                    <div class="flex items-center mt-6">
                        <img
                            class="w-14 h-14 mr-4 rounded-full"
                            src="assets/images/avatars/female-11.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">Cecilia Pozo</div>
                            <div class="text-md leading-none text-secondary mt-1">Went to same college</div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center mt-6 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        See all suggestions
                    </button>
                </div>
            </fuse-card>


            <!-- Card #26 -->
            <fuse-card class="flex flex-col max-w-80 w-full px-8 pt-6 pb-4 filter-list">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Activity Feed</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard04Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard04Menu="matMenu">
                            <button mat-menu-item>Clear activities</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col mt-5">
                    <div class="flex">
                        <img
                            class="w-10 h-10 mr-4 rounded-full"
                            src="assets/images/avatars/female-01.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="leading-tight">Amelia Edwards commented on John Silverton's photo</div>
                            <div class="text-md leading-none text-secondary mt-2">4 minutes ago</div>
                        </div>
                    </div>
                    <div class="flex mt-8">
                        <img
                            class="w-10 h-10 mr-4 rounded-full"
                            src="assets/images/avatars/male-01.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="leading-tight">Lew Silverton changed his profile photo</div>
                            <div class="text-md leading-none text-secondary mt-2">25 minutes ago</div>
                        </div>
                    </div>
                    <div class="flex mt-8">
                        <img
                            class="w-10 h-10 mr-4 rounded-full"
                            src="assets/images/avatars/male-15.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="leading-tight">Brian Hughes liked your photo</div>
                            <div class="text-md leading-none text-secondary mt-2">3 hours ago</div>
                        </div>
                    </div>
                    <div class="flex mt-8">
                        <img
                            class="w-10 h-10 mr-4 rounded-full"
                            src="assets/images/avatars/female-15.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="leading-tight">Marleah Eagleston commented on John Silverton's photo</div>
                            <div class="text-md leading-none text-secondary mt-2">Yesterday</div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center mt-6 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        See entire activity feed
                    </button>
                </div>
            </fuse-card>


            <!-- Card #27 -->
            <fuse-card class="flex flex-col max-w-80 w-full px-8 pt-6 pb-4 filter-list">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Shopping List</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard05Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard05Menu="matMenu">
                            <button mat-menu-item>Mark all as done</button>
                            <button mat-menu-item>Mark all as undone</button>
                            <button mat-menu-item>Remove list</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col mt-3">
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'">
                        Tomatoes
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'"
                        [checked]="true">
                        Milk
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'">
                        Eggs
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'"
                        [checked]="true">
                        Bread
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'">
                        Coffee
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'"
                        [checked]="true">
                        Olives
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'"
                        [checked]="true">
                        Sour Cream
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'">
                        Peanut Butter
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'">
                        Strawberry Jam
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'">
                        Cheese
                    </mat-checkbox>
                </div>
                <div class="flex items-center mt-3 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        Add item
                    </button>
                </div>
            </fuse-card>


            <!-- Card #28 -->
            <fuse-card class="flex flex-col max-w-80 w-full p-8 pt-6 filter-list">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Today's Tasks</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard06Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard06Menu="matMenu">
                            <button mat-menu-item>Mark all as done</button>
                            <button mat-menu-item>Mark all as undone</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex items-center mt-6">
                    <span class="w-3 h-3 border-2 border-blue-500 rounded-full mr-3"></span>
                    <span class="font-medium text-secondary">USER INTERFACE (5)</span>
                </div>
                <div class="flex flex-col mt-2 ml-6">
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'">
                        Design user profile
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'"
                        [checked]="true">
                        Design dashboard
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'">
                        Create auth flow prototype
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'"
                        [checked]="true">
                        Re-design auth pages
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'">
                        Design landing page
                    </mat-checkbox>
                </div>
                <div class="flex items-center mt-8">
                    <span class="w-3 h-3 border-2 border-green-500 rounded-full mr-3"></span>
                    <span class="font-medium text-secondary">DESIGN SYSTEM (3)</span>
                </div>
                <div class="flex flex-col mt-2 ml-6">
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'"
                        [checked]="true">
                        Refine basic elements
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'"
                        [checked]="true">
                        List all the re-usable elements
                    </mat-checkbox>
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'">
                        Add standard form elements
                    </mat-checkbox>
                </div>
            </fuse-card>


            <!-- Card #29 -->
            <fuse-card class="flex flex-col max-w-80 w-full p-8 pt-6 filter-list">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Daily Schedule</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard07Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard07Menu="matMenu">
                            <button mat-menu-item>View weekly</button>
                            <button mat-menu-item>View monthly</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col my-2">
                    <div class="my-2">
                        <div>Code review</div>
                        <div class="text-secondary text-md">11:00 AM</div>
                    </div>
                    <div class="my-2">
                        <div>Lunch with Sam</div>
                        <div class="text-secondary text-md">12:30 PM</div>
                    </div>
                    <div class="my-2">
                        <div>Presentation of weekly usage and analytics report</div>
                        <div class="text-secondary text-md">01:45 PM</div>
                    </div>
                    <div class="my-2">
                        <div>Meeting with new interns</div>
                        <div class="text-secondary text-md">02:30 PM</div>
                    </div>
                    <div class="my-2">
                        <div>Coffee break & John's birthday</div>
                        <div class="text-secondary text-md">03:30 PM</div>
                    </div>
                    <div class="my-2">
                        <div>Dinner with wife and kids</div>
                        <div class="text-secondary text-md">07:30 PM</div>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #30 -->
            <fuse-card class="flex flex-col max-w-80 w-full p-8 pt-6 pb-4 filter-list">
                <div class="text-2xl font-semibold leading-tight">Customer Reviews</div>
                <div class="text-secondary text-md mt-1">
                    <b>4.74</b> average based on <b>508</b> reviews
                </div>
                <div class="flex flex-col mt-4">
                    <div class="flex items-center my-2">
                        <div class="max-w-12 w-full whitespace-nowrap">5 star</div>
                        <mat-progress-bar
                            class="my-2"
                            [value]="87"></mat-progress-bar>
                        <div class="max-w-10 w-full text-right">87%</div>
                    </div>
                    <div class="flex items-center my-2">
                        <div class="max-w-12 w-full whitespace-nowrap">4 star</div>
                        <mat-progress-bar
                            class="my-2"
                            [value]="7"></mat-progress-bar>
                        <div class="max-w-10 w-full text-right">7%</div>
                    </div>
                    <div class="flex items-center my-2">
                        <div class="max-w-12 w-full whitespace-nowrap">3 star</div>
                        <mat-progress-bar
                            class="my-2"
                            [value]="1"></mat-progress-bar>
                        <div class="max-w-10 w-full text-right">1%</div>
                    </div>
                    <div class="flex items-center my-2">
                        <div class="max-w-12 w-full whitespace-nowrap">2 star</div>
                        <mat-progress-bar
                            class="my-2"
                            [value]="1"></mat-progress-bar>
                        <div class="max-w-10 w-full text-right">1%</div>
                    </div>
                    <div class="flex items-center my-2">
                        <div class="max-w-12 w-full whitespace-nowrap">1 star</div>
                        <mat-progress-bar
                            class="my-2"
                            [value]="2"></mat-progress-bar>
                        <div class="max-w-10 w-full text-right">2%</div>
                    </div>
                </div>
                <div class="flex items-center -mx-3 mt-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        Review this product
                    </button>
                </div>
            </fuse-card>


            <!-- Card #31 -->
            <fuse-card class="flex flex-col max-w-80 w-full px-8 pt-6 pb-4 filter-list">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Followers</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard08Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard08Menu="matMenu">
                            <button mat-menu-item>Find friends</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col">
                    <div class="flex justify-between mt-6">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-01.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-01.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-03.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-03.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-04.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-05.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-06.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-05.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-06.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-07.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-08.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-08.jpg"
                            alt="Card cover image">
                    </div>
                </div>
                <div class="flex items-center mt-6 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        See all followers
                    </button>
                </div>
            </fuse-card>


            <!-- Card #32 -->
            <fuse-card class="flex flex-col max-w-80 w-full px-8 pt-6 pb-4 filter-list">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Gallery</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard09Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard09Menu="matMenu">
                            <button mat-menu-item>Add image</button>
                            <button mat-menu-item>Add video</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col">
                    <div class="flex justify-between mt-6">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/14-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/15-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/16-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/17-640x480.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/18-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/19-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/20-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/21-640x480.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/22-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/23-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/24-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/25-640x480.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/26-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/27-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/28-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/29-640x480.jpg"
                            alt="Card cover image">
                    </div>
                </div>
                <div class="flex items-center mt-6 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        See entire gallery
                    </button>
                </div>
            </fuse-card>


            <!-- Card #33 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-listing">
                <img
                    class="object-cover"
                    src="assets/images/cards/mansion-01-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8 mb-4">
                    <div class="flex justify-between">
                        <div class="flex flex-col">
                            <div class="text-secondary text-md">FURNISHED MANSION</div>
                            <div class="text-2xl font-semibold leading-tight mt-1">USD $24.000.000</div>
                        </div>
                        <button
                            class="-mt-2 -mr-2"
                            mat-icon-button>
                            <mat-icon
                                class="text-red-500 icon-size-5"
                                [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        </button>
                    </div>
                    <div class="mt-3 -mx-3">
                        <button
                            class="px-3 mr-1"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Details
                        </button>
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            See on map
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #34 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-listing">
                <img
                    class="object-cover"
                    src="assets/images/cards/mansion-01-320x200.jpg"
                    alt="Card cover image">
                <div class="m-8 mb-4">
                    <div class="flex justify-between">
                        <div class="flex flex-col">
                            <div class="text-secondary text-md">FURNISHED MANSION</div>
                            <div class="text-2xl font-semibold leading-tight mt-1">USD $24.000.000</div>
                            <div class="text-secondary text-md mt-1">1 E. Pumpkin Hill Drive</div>
                        </div>
                        <button
                            class="-mt-2 -mr-2"
                            mat-icon-button>
                            <mat-icon
                                class="text-hint icon-size-5"
                                [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        </button>
                    </div>
                    <hr class="border-b my-4">
                    <div class="flex flex-wrap text-md">
                        <span class="whitespace-nowrap"><b>10</b> beds</span>
                        <span class="text-secondary mx-2">&bull;</span>
                        <span class="whitespace-nowrap"><b>4</b> baths</span>
                        <span class="text-secondary mx-2">&bull;</span>
                        <span class="whitespace-nowrap"><b>21k</b> sqft.</span>
                    </div>
                    <hr class="border-b my-4">
                    <div class="mt-3 -mx-3">
                        <button
                            class="px-3 mr-1"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Details
                        </button>
                        <button
                            class="px-3"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            See on map
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #35 -->
            <fuse-card class="flex flex-col items-center max-w-80 w-full p-8 filter-info">
                <div class="flex items-center justify-center p-5 rounded-full bg-primary-100 dark:bg-gray-600">
                    <mat-icon
                        class="icon-size-10 text-primary-500 dark:text-primary-300"
                        [svgIcon]="'heroicons_outline:support'"></mat-icon>
                </div>
                <div class="text-2xl font-semibold leading-tight text-center mt-6">Support</div>
                <div class="text-center text-secondary mt-3">Contact support to learn more about our products and get professional help</div>
                <button
                    class="px-6 mt-8"
                    mat-flat-button
                    [color]="'primary'"
                    [routerLink]="['./']">
                    Contact Now
                </button>
            </fuse-card>


            <!-- Card #36 -->
            <fuse-card class="flex flex-col items-center max-w-80 w-full p-8 filter-info">
                <mat-icon
                    class="icon-size-16 text-red-500"
                    [svgIcon]="'heroicons_solid:light-bulb'"></mat-icon>
                <div class="text-2xl font-semibold leading-tight text-center mt-6">Branding & Product Design</div>
                <div class="text-center text-secondary mt-1 mb-8">Brand strategy, purpose, and product positioning</div>
                <div class="flex items-center">
                    <img
                        class="w-8 h-8 rounded-full text-card ring-2 ring-bg-card"
                        src="assets/images/avatars/female-02.jpg"
                        alt="Card cover image">
                    <img
                        class="w-8 h-8 rounded-full -ml-2 text-card ring-2 ring-bg-card"
                        src="assets/images/avatars/female-04.jpg"
                        alt="Card cover image">
                    <img
                        class="w-8 h-8 rounded-full -ml-2 text-card ring-2 ring-bg-card"
                        src="assets/images/avatars/male-09.jpg"
                        alt="Card cover image">
                    <img
                        class="w-8 h-8 rounded-full -ml-2 text-card ring-2 ring-bg-card"
                        src="assets/images/avatars/male-07.jpg"
                        alt="Card cover image">
                    <img
                        class="w-8 h-8 rounded-full -ml-2 text-card ring-2 ring-bg-card"
                        src="assets/images/avatars/female-12.jpg"
                        alt="Card cover image">
                </div>
                <div class="text-sm font-medium text-secondary mt-2">+13 more</div>
                <button
                    class="px-6 mt-8"
                    mat-flat-button
                    [color]="'primary'"
                    [routerLink]="['./']">
                    View Project
                </button>
            </fuse-card>


            <!-- Card #37 -->
            <fuse-card class="flex flex-col items-center max-w-80 w-full p-8 pb-6 filter-info">
                <img
                    class="w-32 h-32 rounded-full"
                    src="assets/images/avatars/male-04.jpg"
                    alt="Card cover image">
                <div class="text-2xl font-semibold leading-tight text-center mt-8">Brian Hughes</div>
                <div class="text-secondary leading-tight text-center mt-1">London, UK</div>
                <hr class="w-full border-t mt-8 mb-0">
                <div class="w-full flex items-center justify-between my-4 px-2">
                    <div class="flex flex-col items-center">
                        <span class="font-bold">1.2k</span>
                        <span class="text-sm font-medium text-secondary">POSTS</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <span class="font-bold">200k</span>
                        <span class="text-sm font-medium text-secondary">FOLLOWERS</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <span class="font-bold">1.2k</span>
                        <span class="text-sm font-medium text-secondary">FOLLOWING</span>
                    </div>
                </div>
                <hr class="w-full border-t mt-0 mb-8">
                <div class="text-center text-secondary">I’m a friendly kitchen assistant who suffers from a severe phobia of buttons</div>
                <button
                    class="px-6 mt-4"
                    mat-button
                    [color]="'primary'"
                    [routerLink]="['./']">
                    More about Brian
                </button>
            </fuse-card>


            <!-- Card #38 -->
            <fuse-card class="flex flex-col max-w-80 w-full p-8 filter-info">
                <div class="text-2xl font-semibold leading-tight">About Me</div>
                <div class="mt-4">
                    I’m a friendly kitchen assistant who suffers from a severe phobia of buttons.
                    <br><br>
                    Brother of Elijah Jay Watkins, who has phobia of buttons and trust issues.
                </div>
                <hr class="w-full border-t my-6">
                <div class="flex flex-col">
                    <div class="flex items-center">
                        <mat-icon
                            class="icon-size-5 mr-3"
                            [svgIcon]="'heroicons_solid:location-marker'"></mat-icon>
                        <span class="leading-none">London, UK</span>
                    </div>
                    <div class="flex items-center mt-4">
                        <mat-icon
                            class="icon-size-5 mr-3"
                            [svgIcon]="'heroicons_solid:briefcase'"></mat-icon>
                        <span class="leading-none">ACME Corp. Lead UX Designer</span>
                    </div>
                    <div class="flex items-center mt-4">
                        <mat-icon
                            class="icon-size-5 mr-3"
                            [svgIcon]="'heroicons_solid:cake'"></mat-icon>
                        <span class="leading-none">April, 24</span>
                    </div>
                </div>
                <button
                    class="px-6 mt-8"
                    mat-flat-button
                    [color]="'primary'"
                    [routerLink]="['./']">
                    See complete bio
                </button>
            </fuse-card>


            <!-- Card #39 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-info">
                <div class="flex h-32">
                    <img
                        class="object-cover"
                        src="assets/images/cards/coffee-shop-01-320x200.jpg"
                        alt="Card cover image">
                </div>
                <div class="flex px-8">
                    <div class="p-1 bg-card rounded-full -mt-12">
                        <img
                            class="w-24 h-24 rounded-full"
                            src="assets/images/avatars/male-04.jpg"
                            alt="Card cover image">
                    </div>
                </div>
                <div class="flex flex-col px-8 pt-4 pb-6">
                    <div class="flex items-center justify-between">
                        <div class="mr-4">
                            <div class="text-2xl font-semibold leading-tight">Brian Hughes</div>
                            <div class="text-secondary leading-tight mt-1">London, UK</div>
                        </div>
                        <div class="flex items-center justify-center w-10 h-10 border rounded-full">
                            <button mat-icon-button>
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="'heroicons_solid:user-add'"></mat-icon>
                            </button>
                        </div>
                    </div>
                    <hr class="w-full border-t my-6">
                    <div class="flex items-center justify-between">
                        <div class="text-md font-medium text-secondary mr-3">4 mutual friends</div>
                        <div class="flex items-center">
                            <img
                                class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                                src="assets/images/avatars/female-02.jpg"
                                alt="Card cover image">
                            <img
                                class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                                src="assets/images/avatars/female-04.jpg"
                                alt="Card cover image">
                            <img
                                class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                                src="assets/images/avatars/male-09.jpg"
                                alt="Card cover image">
                            <img
                                class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                                src="assets/images/avatars/male-07.jpg"
                                alt="Card cover image">
                        </div>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #40 -->
            <fuse-card class="flex items-center max-w-80 w-full p-6 filter-info">
                <img
                    class="w-20 h-20 mr-6 rounded-full"
                    src="assets/images/avatars/male-04.jpg"
                    alt="Card cover image">
                <div class="flex flex-col">
                    <div class="text-2xl font-semibold leading-tight">Brian Hughes</div>
                    <div class="text-md text-secondary">London, UK</div>
                </div>
            </fuse-card>


            <!-- Card #41 -->
            <fuse-card class="flex items-center justify-between max-w-80 w-full p-6 filter-info">
                <div class="flex flex-col">
                    <div class="text-2xl font-semibold leading-tight">Brian Hughes</div>
                    <div class="text-md text-secondary">London, UK</div>
                </div>
                <img
                    class="w-20 h-20 ml-6 rounded-full"
                    src="assets/images/avatars/male-04.jpg"
                    alt="Card cover image">
            </fuse-card>


            <!-- Card #42 -->
            <fuse-card class="flex items-center max-w-80 w-full p-6 filter-info">
                <img
                    class="w-16 h-16 mr-6 rounded-full"
                    src="assets/images/avatars/male-04.jpg"
                    alt="Card cover image">
                <div class="flex flex-col">
                    <div class="text-2xl font-semibold leading-tight">Brian Hughes</div>
                    <div class="text-md leading-tight text-primary">Head of HR Department</div>
                    <div class="text-md text-secondary mt-2">h.brian@company.com</div>
                </div>
            </fuse-card>


            <!-- Card #43 -->
            <fuse-card class="flex items-center justify-between max-w-80 w-full p-6 filter-info">
                <div class="flex flex-col">
                    <div class="text-2xl font-semibold leading-tight">Brian Hughes</div>
                    <div class="text-md leading-tight text-primary">Head of HR Department</div>
                    <div class="text-md text-secondary mt-2">h.brian@company.com</div>
                </div>
                <img
                    class="w-16 h-16 ml-6 rounded-full"
                    src="assets/images/avatars/male-04.jpg"
                    alt="Card cover image">
            </fuse-card>


            <!-- Card #44 -->
            <fuse-card class="flex items-center max-w-80 w-full p-6 filter-info">
                <mat-icon
                    class="icon-size-12 mr-6"
                    [svgIcon]="'iconsmind:mail'"></mat-icon>
                <div class="flex flex-col">
                    <div class="text-2xl font-semibold leading-tight">1 new mail</div>
                    <div class="text-md text-secondary">Mailbox</div>
                </div>
            </fuse-card>


            <!-- Card #45 -->
            <fuse-card class="flex items-center justify-between max-w-80 w-full p-6 filter-info">
                <div class="flex flex-col">
                    <div class="text-2xl font-semibold leading-tight">New message</div>
                    <div class="text-md text-secondary">from John Balista</div>
                </div>
                <mat-icon
                    class="icon-size-12 ml-6"
                    [svgIcon]="'iconsmind:speach_bubbles'"></mat-icon>
            </fuse-card>


            <!-- Card #46 -->
            <fuse-card class="flex max-w-80 w-full filter-info">
                <img
                    class="w-24 h-30 object-cover"
                    src="assets/images/cards/product-01-224x256.jpg"
                    alt="Card cover image">
                <div class="flex flex-col flex-auto justify-center p-6">
                    <div class="text-lg font-semibold leading-tight">Lavender Bouquet</div>
                    <div class="text-md text-secondary">USD $5</div>
                    <div class="text-md text-green-600 mt-3">5 left in stock</div>
                </div>
            </fuse-card>


            <!-- Card #47 -->
            <fuse-card class="flex justify-between max-w-80 w-full filter-info">
                <div class="flex flex-col flex-auto justify-center p-6">
                    <div class="text-lg font-semibold leading-tight">Lavender Bouquet</div>
                    <div class="text-md text-secondary">USD $5</div>
                    <div class="text-md text-green-600 mt-3">5 left in stock</div>
                </div>
                <img
                    class="w-24 h-30 object-cover"
                    src="assets/images/cards/product-01-224x256.jpg"
                    alt="Card cover image">
            </fuse-card>


            <!-- Card #48 -->
            <fuse-card class="flex-col w-full max-w-100 p-6 sm:py-12 sm:px-10 filter-pricing">
                <div class="text-4xl font-bold tracking-tight leading-tight">Personal</div>
                <div class="mt-2 text-lg font-medium tracking-tight text-secondary">Perfect for an individual or a small team starting to get bigger</div>
                <div class="w-8 h-1 my-10 rounded bg-accent"></div>
                <!-- Price -->
                <div class="flex items-baseline whitespace-nowrap">
                    <div class="mr-2 text-2xl">USD</div>
                    <div class="text-6xl font-semibold leading-tight tracking-tight">$6.00</div>
                </div>
                <!-- Price details -->
                <div class="flex flex-col mt-2 text-secondary">
                    <div>billed monthly</div>
                    <div><b>$6.00</b> billed yearly</div>
                </div>
                <!-- CTA -->
                <button
                    class="fuse-mat-button-large mt-10"
                    mat-stroked-button
                    [color]="'primary'">
                    Get Started
                </button>
                <!-- Features -->
                <div class="flex flex-col mt-12">
                    <div class="font-semibold">Core features, including:</div>
                    <div class="mt-4 space-y-2">
                        <div class="flex">
                            <mat-icon
                                class="icon-size-5 text-green-600"
                                [svgIcon]="'heroicons_solid:check'"></mat-icon>
                            <div class="ml-2 leading-5"><b>10</b> projects</div>
                        </div>
                        <div class="flex">
                            <mat-icon
                                class="icon-size-5 text-green-600"
                                [svgIcon]="'heroicons_solid:check'"></mat-icon>
                            <div class="ml-2 leading-5"><b>5GB</b> storage</div>
                        </div>
                        <div class="flex">
                            <mat-icon
                                class="icon-size-5 text-green-600"
                                [svgIcon]="'heroicons_solid:check'"></mat-icon>
                            <div class="ml-2 leading-5">Analytics</div>
                        </div>
                        <div class="flex">
                            <mat-icon
                                class="icon-size-5 text-green-600"
                                [svgIcon]="'heroicons_solid:check'"></mat-icon>
                            <div class="ml-2 leading-5">Free mobile app</div>
                        </div>
                        <div class="flex">
                            <mat-icon
                                class="icon-size-5 text-green-600"
                                [svgIcon]="'heroicons_solid:check'"></mat-icon>
                            <div class="ml-2 leading-5">Access to forums</div>
                        </div>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #49 -->
            <fuse-card class="flex-col items-center w-full max-w-80 p-8 sm:py-12 sm:px-10 lg:rounded-none lg:rounded-l text-center filter-pricing">
                <div class="text-4xl font-bold tracking-tight leading-tight">Personal</div>
                <!-- Price -->
                <div class="flex items-baseline mt-8 whitespace-nowrap">
                    <div class="text-6xl font-semibold leading-tight tracking-tight">$6</div>
                    <div class="ml-2 text-2xl text-secondary">/ month</div>
                </div>
                <!-- Price details -->
                <div class="flex flex-col mt-2 text-secondary">
                    <div>billed monthly</div>
                    <div><b>$6.00</b> billed yearly</div>
                </div>
                <!-- Features -->
                <div class="mt-8 space-y-2">
                    <div><b>10</b> projects</div>
                    <div><b>5GB</b> storage</div>
                    <div>Analytics</div>
                    <div>Free mobile app</div>
                    <div>Access to forums</div>
                </div>
                <!-- CTA -->
                <button
                    class="fuse-mat-button-large w-full mt-10"
                    mat-stroked-button
                    [color]="'primary'">
                    Start your trial
                </button>
            </fuse-card>

            <!-- Card #50 -->
            <fuse-card class="flex flex-col lg:flex-row max-w-sm lg:max-w-240 filter-pricing">
                <div class="p-6 sm:p-8 lg:p-10">
                    <div class="text-3xl font-bold">Lifetime Membership</div>
                    <div class="mt-2 leading-relaxed text-secondary">
                        Learn from like-minded individuals which are eager to make a living building stuff on the web. Pay once and get lifetime access to the community.
                    </div>
                    <div class="flex items-center mt-10">
                        <div class="font-medium text-secondary">INCLUDED FEATURES</div>
                        <div class="flex-auto ml-2 border-b-2"></div>
                    </div>
                    <!-- Features -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-y-4 mt-6">
                        <div class="flex items-center">
                            <mat-icon
                                class="icon-size-5 text-primary"
                                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
                            <div class="ml-2">Private forum access</div>
                        </div>
                        <div class="flex items-center">
                            <mat-icon
                                class="icon-size-5 text-primary"
                                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
                            <div class="ml-2">Access to annual online conference</div>
                        </div>
                        <div class="flex items-center">
                            <mat-icon
                                class="icon-size-5 text-primary"
                                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
                            <div class="ml-2">Member resources</div>
                        </div>
                        <div class="flex items-center">
                            <mat-icon
                                class="icon-size-5 text-primary"
                                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
                            <div class="ml-2">Official member T-Shirt</div>
                        </div>
                    </div>
                </div>
                <!-- Price -->
                <div class="flex flex-col items-center p-8 lg:px-10 lg:py-12 lg:min-w-80 bg-gray-100 dark:bg-black dark:bg-opacity-10">
                    <div class="flex items-center whitespace-nowrap">
                        <div class="text-8xl font-extrabold tracking-tight">$599</div>
                        <div class="ml-2 text-2xl font-semibold text-secondary">USD</div>
                    </div>
                    <div class="font-medium text-center text-secondary">
                        <div>No monthly subscription,</div>
                        <div>you only pay once.</div>
                    </div>
                    <button
                        class="w-full mt-8 lg:mt-auto"
                        mat-flat-button
                        [color]="'primary'">
                        Get Started
                    </button>
                </div>
            </fuse-card>


            <!-- Card #51 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-shopping">
                <div class="relative">
                    <div class="absolute flex flex-col top-0 right-0 p-3">
                        <button mat-icon-button>
                            <mat-icon
                                class="icon-size-5 text-white text-opacity-50"
                                [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        </button>
                        <button mat-icon-button>
                            <mat-icon
                                class="icon-size-5 text-white text-opacity-50"
                                [svgIcon]="'heroicons_solid:switch-horizontal'"></mat-icon>
                        </button>
                    </div>
                    <img
                        class="object-cover"
                        src="assets/images/cards/sneakers-01-320x200.jpg"
                        alt="Card cover image">
                </div>
                <div class="m-8 mb-0">
                    <div class="flex flex-col">
                        <div class="text-2xl leading-tight">Black sneakers with white stripes</div>
                        <div class="text-3xl font-semibold mt-2">$240.00</div>
                    </div>
                    <hr class="border-b my-6">
                    <div class="flex items-center text-md">
                        <span class="text-secondary whitespace-nowrap mr-3">Select a size:</span>
                        <span class="mr-2">39</span>
                        <span class="mr-2">40</span>
                        <span class="mr-2">41</span>
                        <span class="font-bold text-primary mr-2">42</span>
                        <span class="mr-2">43</span>
                    </div>
                    <div class="mt-6 -mx-8">
                        <button
                            class="w-full rounded-t-none"
                            mat-flat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            Add to Cart
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #52 -->
            <fuse-card class="flex flex-col md:flex-row max-w-80 md:max-w-160 w-full filter-shopping">
                <div class="flex-0 w-80 md:w-60 ">
                    <img
                        class="w-full h-full object-cover"
                        src="assets/images/cards/sneakers-02-448x560.jpg"
                        alt="Card cover image">
                </div>
                <div class="flex flex-col flex-auto m-8 mb-4">
                    <div class="text-2xl leading-tight">Gray sneakers with white stripes</div>
                    <div class="text-md font-medium text-secondary mt-1">ALIDAS</div>
                    <div class="text-3xl font-semibold mt-4">$240.00</div>
                    <div class="flex items-center text-md mt-6">
                        <span class="text-secondary whitespace-nowrap mr-3">Select a size:</span>
                        <span class="mr-2">39</span>
                        <span class="mr-2">40</span>
                        <span class="mr-2">41</span>
                        <span class="font-bold text-primary mr-2">42</span>
                        <span class="mr-2">43</span>
                    </div>
                    <hr class="w-full border-b mt-6 md:mt-auto mb-4">
                    <div class="flex items-center -mx-3">
                        <button
                            class="px-3 mr-1"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:shopping-cart'"></mat-icon>
                            <span class="ml-2">Add to Cart</span>
                        </button>
                        <button
                            class="ml-auto"
                            mat-icon-button>
                            <mat-icon
                                class="icon-size-5 text-hint"
                                [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        </button>
                        <button mat-icon-button>
                            <mat-icon
                                class="icon-size-5 text-hint"
                                [svgIcon]="'heroicons_solid:switch-horizontal'"></mat-icon>
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #53 -->
            <fuse-card class="flex flex-col md:flex-row max-w-80 md:max-w-160 w-full filter-shopping">
                <div class="flex-0 w-80 md:w-60">
                    <img
                        class="w-full h-full object-cover"
                        src="assets/images/cards/sneakers-03-448x560.jpg"
                        alt="Card cover image">
                </div>
                <div class="flex flex-col flex-auto m-8 mb-4">
                    <div class="flex flex-col md:flex-row items-baseline justify-between">
                        <div class="text-2xl leading-tight">White sneakers with red stripes</div>
                        <div class="text-3xl font-semibold mt-4 md:mt-0 md:ml-6">$240.00</div>
                    </div>
                    <div class="text-md text-secondary mt-6">
                        White sneakers are made of natural, biodegradable material. This feature alione makes them extremely nature friendly.
                    </div>
                    <div class="flex items-center text-md mt-6">
                        <span class="text-secondary whitespace-nowrap mr-3">Select a size:</span>
                        <span class="mr-2">39</span>
                        <span class="mr-2">40</span>
                        <span class="mr-2">41</span>
                        <span class="font-bold text-primary mr-2">42</span>
                        <span class="mr-2">43</span>
                    </div>
                    <hr class="w-full border-b mt-6 mb-4">
                    <div class="flex items-center md:mt-auto -mx-3">
                        <button
                            class="px-3 mr-1"
                            mat-button
                            [color]="'primary'"
                            [routerLink]="['./']">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:shopping-cart'"></mat-icon>
                            <span class="ml-2">Add to Cart</span>
                        </button>
                        <button
                            class="ml-auto"
                            mat-icon-button>
                            <mat-icon
                                class="icon-size-5 text-hint"
                                [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        </button>
                        <button mat-icon-button>
                            <mat-icon
                                class="icon-size-5 text-hint"
                                [svgIcon]="'heroicons_solid:switch-horizontal'"></mat-icon>
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #54 -->
            <fuse-card class="relative flex flex-col max-w-80 w-full p-8 filter-testimonial">
                <span class="absolute top-0 left-0 text-9xl font-serif text-primary leading-none mt-8 ml-8">“</span>
                <div class="text-lg italic leading-relaxed mt-4">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    Puzzles coffee shop is one of the finest coffee shops in central downtown in New York.
                    It's quiet; far away from busy streets and never ending constructions.
                </div>
                <div class="text-md font-medium text-primary mt-4">
                    &#8212; Melissa Morillo, Comtent
                </div>
            </fuse-card>


            <!-- Card #55 -->
            <fuse-card class="flex flex-col max-w-80 w-full filter-testimonial">
                <div class="text-lg italic leading-relaxed p-8">
                    Puzzles coffee shop is one of the finest coffee shops in central downtown in New York.
                    It's quiet; far away from busy streets and never ending constructions.
                </div>
                <div class="flex flex-col items-center text-md font-medium bg-primary text-on-primary px-8 py-6 mt-4">
                    <span class="relative -mt-14 mb-4 p-1 bg-card rounded-full">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/cards/avatar-400x400.jpg"
                            alt="Card cover image">
                    </span>
                    <span class="text-md">MELISSA MORILLO</span>
                    <span class="text-sm text-primary-300">COMTENT</span>
                </div>
            </fuse-card>


            <!-- Card #56 -->
            <fuse-card class="flex flex-col md:flex-row max-w-80 md:max-w-160 w-full filter-testimonial">
                <div class="flex-0 w-80 md:w-32">
                    <img
                        class="w-full h-full object-cover"
                        src="assets/images/cards/avatar-400x400.jpg"
                        alt="Card cover image">
                </div>
                <div class="flex flex-col flex-auto m-8">
                    <div class="text-lg italic leading-relaxed">
                        Puzzles coffee shop is one of the finest coffee shops in central downtown in New York.
                        It's quiet; far away from busy streets and never ending constructions.
                    </div>
                    <div class="text-md font-medium text-primary mt-4">
                        &#8212; Melissa Morillo, Comtent
                    </div>
                </div>
            </fuse-card>


            <!-- Card #57 -->
            <fuse-card class="flex flex-col md:flex-row items-center justify-between max-w-80 md:max-w-160 w-full p-8 filter-testimonial">
                <img
                    class="w-30 h-full md:mr-8 mb-8 md:mb-0 rounded-full object-cover"
                    src="assets/images/cards/avatar-400x400.jpg"
                    alt="Card cover image">
                <div class="flex flex-col flex-auto justify-center">
                    <div class="text-lg italic leading-relaxed">
                        Puzzles coffee shop is one of the finest coffee shops in central downtown in New York.
                        It's quiet; far away from busy streets and never ending constructions.
                    </div>
                    <div class="text-md font-medium text-primary mt-4">
                        &#8212; Melissa Morillo, Comtent
                    </div>
                </div>
            </fuse-card>


            <!-- Card #58 -->
            <fuse-card class="flex flex-col max-w-140 w-full p-6 sm:p-8 pb-6 filter-post">
                <div class="text-xl font-semibold">Create Post</div>
                <div class="flex flex-col sm:flex-row items-start mt-8">
                    <div class="flex items-center mb-6 sm:mb-0">
                        <img
                            class="w-12 min-w-12 h-12 rounded-full mr-4"
                            src="assets/images/avatars/brian-hughes.jpg"
                            alt="Card cover image">
                        <div class="sm:hidden">Brian Hughes</div>
                    </div>
                    <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                        <textarea
                            matInput
                            [placeholder]="'What\'s on your mind?'"
                            [rows]="3"
                            matTextareaAutosize></textarea>
                    </mat-form-field>
                </div>
                <div class="flex items-center mt-6 sm:mt-8 -mx-3">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:photograph'"></mat-icon>
                        <span>Photo / Video</span>
                    </button>
                    <button
                        class="px-3 mr-1 hidden sm:inline-flex"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                        <span>Tag Friends</span>
                    </button>
                    <button
                        class="px-3 mr-1 hidden sm:inline-flex"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
                        <span>Feeling</span>
                    </button>
                    <button
                        class="px-3"
                        mat-button
                        [matMenuTriggerFor]="postCardMenu01">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-horizontal'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu01="matMenu">
                        <button
                            class="sm:hidden"
                            mat-menu-item
                            [routerLink]="['./']">
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                                <span>Tag Friends</span>
                            </span>
                        </button>
                        <button
                            class="sm:hidden"
                            mat-menu-item
                            [routerLink]="['./']">
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
                                <span>Feeling</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:play'"></mat-icon>
                                <span>Live</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:sparkles'"></mat-icon>
                                <span>Gif</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:location-marker'"></mat-icon>
                                <span>Check in</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
            </fuse-card>


            <!-- Card #59 - Expandable card -->
            <fuse-card
                class="flex flex-col max-w-140 w-full filter-post filter-interactive"
                #expandableCard02="fuseCard">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-01.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Caroline Lundu</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu02">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu02="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Look at that sky! I so want to be there.. Can we arrange a trip? Is that a possibility? Please!!!
                </div>
                <div class="relative mb-4">
                    <img
                        class="h-80 object-cover"
                        src="assets/images/cards/14-640x480.jpg"
                        alt="Card cover image">
                    <div
                        class="absolute bottom-0 left-0 flex items-center justify-center w-8 h-8 m-4 rounded-full cursor-pointer bg-gray-700"
                        [matTooltip]="'Barmouth / UK'"
                        [matTooltipPosition]="'right'">
                        <mat-icon
                            class="icon-size-4 text-gray-100"
                            [svgIcon]="'heroicons_solid:location-marker'"></mat-icon>
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-4"
                            mat-button
                            (click)="expandableCard02.expanded = !expandableCard02.expanded">
                            <span class="mr-1">5 Comments</span>
                            <mat-icon
                                class="icon-size-5 transform transition-transform ease-in-out duration-150 rotate-0"
                                [ngClass]="{'rotate-180': expandableCard02.expanded}"
                                [svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
                        </button>
                    </div>
                </div>

                <ng-container fuseCardExpansion>
                    <hr class="border-b m-0">
                    <div class="flex flex-col mx-4 sm:mx-8 mt-6 mb-3">
                        <div class="flex items-start">
                            <img
                                class="w-12 h-12 rounded-full mr-5"
                                src="assets/images/avatars/brian-hughes.jpg"
                                alt="Card cover image">
                            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                                <textarea
                                    matInput
                                    [rows]="3"
                                    [placeholder]="'Write a comment...'"
                                    matTextareaAutosize></textarea>
                            </mat-form-field>
                        </div>
                        <div class="flex items-center mt-3 ml-auto -mr-3">
                            <button mat-icon-button>
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="'heroicons_solid:sparkles'"></mat-icon>
                            </button>
                            <button mat-icon-button>
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
                            </button>
                            <button mat-icon-button>
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="'heroicons_solid:photograph'"></mat-icon>
                            </button>
                        </div>
                    </div>
                    <hr class="border-b mx-4 sm:mx-8 my-0">
                    <div class="max-h-120 overflow-y-auto">
                        <div class="relative flex flex-col mx-4 sm:mx-8 my-6">
                            <div class="flex items-start">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/male-05.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Rutherford Brannan</b> Oh, I’m in.. Let’s arrange a trip for the next weekend if you want!
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Hide replies
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>17 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/female-01.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Caroline Lundu</b> Yes!! Let's talk about it on lunch!
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>15 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/female-08.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Barbara Cotilla</b> Count me in !!!
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>12 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/male-11.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Alan Marti</b> The color of the sky doesn’t look natural at all, do you really think this is natural? I’d say Photoshop!
                                        Your trip isn't going to worth it since you won't be seeing this exact sky.
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Hide replies
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>24 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/female-01.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Caroline Lundu</b> Hey, Alan! You must be fun at parties!
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>22 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/male-11.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Alan Marti</b> Caroline, I'm telling the truth, and if you cannot stand the truth, maybe we shouldn't be friends anymore...
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>20 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/female-01.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Caroline Lundu</b> Dude! Relax! I'm just messing with you...
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>18 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/male-11.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Alan Marti</b> Sorry! I had a bad morning, let's talk about this in couple hours, I need to relax a bit :(
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>16 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/female-05.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Marleah Eagleston</b> Count me in, too!
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>34 min</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-container>
            </fuse-card>


            <!-- Card #60 -->
            <fuse-card class="flex flex-col max-w-140 w-full filter-post">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-14.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Marleah Eagleston</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu03">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu03="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Look at that sky! I so want to be there.. Can we arrange a trip? Is that a possibility? Please!!!
                </div>
                <div class="flex mx-6 sm:mx-8 mb-4">
                    <div class="flex h-80 pr-1">
                        <img
                            class="rounded object-cover"
                            src="assets/images/cards/15-640x480.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex h-80 pl-1">
                        <img
                            class="rounded object-cover"
                            src="assets/images/cards/16-640x480.jpg"
                            alt="Card cover image">
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #61 -->
            <fuse-card class="flex flex-col max-w-140 w-full filter-post">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-14.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Marleah Eagleston</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu04">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu04="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Look at that sky! I so want to be there.. Can we arrange a trip? Is that a possibility? Please!!!
                </div>
                <div class="flex mx-6 sm:mx-8 mb-4">
                    <div class="flex h-80 pr-1">
                        <img
                            class="rounded object-cover"
                            src="assets/images/cards/17-640x480.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex flex-col pl-1">
                        <div class="flex h-40 pb-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/18-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="flex h-40 pt-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/19-640x480.jpg"
                                alt="Card cover image">
                        </div>
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #62 -->
            <fuse-card class="flex flex-col max-w-140 w-full filter-post">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-14.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Marleah Eagleston</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu05">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu05="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8  mt-2 mb-6">
                    Look at that sky! I so want to be there.. Can we arrange a trip? Is that a possibility? Please!!!
                </div>
                <div class="flex mx-6 sm:mx-8 mb-4">
                    <div class="flex flex-col pr-1">
                        <div class="flex h-40 pb-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/20-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="flex h-40 pt-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/21-640x480.jpg"
                                alt="Card cover image">
                        </div>
                    </div>
                    <div class="flex flex-col pl-1">
                        <div class="flex h-40 pb-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/22-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="flex h-40 pt-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/23-640x480.jpg"
                                alt="Card cover image">
                        </div>
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #63 -->
            <fuse-card class="flex flex-col max-w-140 w-full filter-post">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-14.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Marleah Eagleston</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu06">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu06="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Look at that sky! I so want to be there.. Can we arrange a trip? Is that a possibility? Please!!!
                </div>
                <div class="flex flex-col mx-6 sm:mx-8 mb-4">
                    <div class="flex pb-1">
                        <div class="flex h-60 pr-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/24-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="flex h-60 pl-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/25-640x480.jpg"
                                alt="Card cover image">
                        </div>
                    </div>
                    <div class="flex pt-1">
                        <div class="flex h-40 pr-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/26-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="flex h-40 px-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/27-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="flex h-40 pl-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/28-640x480.jpg"
                                alt="Card cover image">
                        </div>
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #64 -->
            <fuse-card class="flex flex-col max-w-140 w-full filter-post">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-14.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Marleah Eagleston</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu07">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu07="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Look at that sky! I so want to be there.. Can we arrange a trip? Is that a possibility? Please!!!
                </div>
                <div class="flex flex-col mx-6 sm:mx-8 mb-4">
                    <div class="flex pb-1">
                        <div class="flex h-60 pr-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/29-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="flex h-60 pl-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/30-640x480.jpg"
                                alt="Card cover image">
                        </div>
                    </div>
                    <div class="flex pt-1">
                        <div class="flex h-40 pr-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/31-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="flex h-40 px-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/32-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="relative flex h-40 pl-1">
                            <div class="absolute flex items-center justify-center inset-0 ml-1 rounded overflow-hidden">
                                <span class="z-10 text-4xl text-white">+12</span>
                                <span class="absolute w-full h-full bg-primary opacity-70"></span>
                            </div>
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/33-640x480.jpg"
                                alt="Card cover image">
                        </div>
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #65 -->
            <fuse-card class="flex flex-col max-w-140 w-full filter-post">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-1">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-01.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Caroline Lundu</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu08">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu08="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="m-6 sm:mx-8">
                    <p>
                        We'll put a happy little sky in here. We touch the canvas, the canvas takes what it wants. A little happy sunlight shining through there.
                        Let's build some happy little clouds up here. I was blessed with a very steady hand; and it comes in very handy when you're doing these little delicate
                        things. This is the fun part.
                    </p>
                    <p class="mt-4">
                        Isn't it great to do something you can't fail at? Little trees and bushes grow however makes them happy.
                        Trees get lonely too, so we'll give him a little friend. There are no mistakes. You can fix anything that happens.
                    </p>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #66 -->
            <fuse-card class="flex flex-col max-w-140 w-full filter-post">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-01.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Caroline Lundu</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu09">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu09="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Hey!! I never saw this episode, it was amazing.. I think I’m going to buy myself a set and try his technique at home!
                </div>
                <div class="mx-6 sm:mx-8 mb-4">
                    <div class="flex rounded overflow-hidden border">
                        <div class="flex-0 w-40">
                            <img
                                class="w-full h-full object-cover"
                                src="assets/images/cards/35-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="m-4">
                            <div class="text-lg font-medium">Rob Boss - Season 09 Episode 04</div>
                            <div class="text-secondary mt-1">
                                We'll put a happy little sky in here. We touch the canvas, the canvas takes what it wants. A little happy sunlight shining through there.
                            </div>
                            <div class="text-sm text-hint mt-2">example.com</div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #67 -->
            <fuse-card class="flex flex-col max-w-140 w-full filter-post">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-01.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-medium leading-none">Caroline Lundu</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu10">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu10="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Hey!! I never saw this one, it was amazing.. I think I’m going to buy myself a set and try his technique at home!
                </div>
                <div class="mx-6 sm:mx-8 mb-4">
                    <div class="flex flex-col rounded overflow-hidden border">
                        <div class="flex h-80">
                            <img
                                class="object-cover"
                                src="assets/images/cards/36-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="m-4">
                            <div class="text-lg font-medium">Take a look behind the scenes of Rob Boss episodes</div>
                            <div class="text-secondary mt-1">
                                We'll put a happy little sky in here. We touch the canvas, the canvas takes what it wants. A little happy sunlight shining through there.
                            </div>
                            <div class="text-sm text-hint mt-2">example.com</div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-bg-card"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>


            <!-- Card #68 -->
            <fuse-card class="flex flex-col max-w-140 w-full filter-post">
                <div class="flex flex-col mx-4 sm:mx-8 mt-6 mb-3">
                    <div class="flex items-start">
                        <img
                            class="w-12 h-12 rounded-full mr-5"
                            src="assets/images/avatars/brian-hughes.jpg"
                            alt="Card cover image">
                        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                            <textarea
                                class="leading-normal my-2"
                                matInput
                                [placeholder]="'Write a comment...'"
                                matTextareaAutosize
                                [rows]="3"></textarea>
                        </mat-form-field>
                    </div>
                    <div class="flex items-center mt-3 ml-auto -mr-3">
                        <button mat-icon-button>
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:sparkles'"></mat-icon>
                        </button>
                        <button mat-icon-button>
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
                        </button>
                        <button mat-icon-button>
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:photograph'"></mat-icon>
                        </button>
                    </div>
                </div>
                <hr class="border-b mx-4 sm:mx-8 my-0">
                <div class="max-h-120 overflow-y-auto">
                    <div class="relative flex flex-col mx-4 sm:mx-8 my-6">
                        <div class="flex items-start">
                            <img
                                class="w-8 h-8 rounded-full mr-4"
                                src="assets/images/avatars/male-05.jpg"
                                alt="Card cover image">
                            <div class="flex flex-col mt-0.5">
                                <span>
                                    <b>Rutherford Brannan</b> Oh, I’m in.. Let’s arrange a trip for the next weekend if you want!
                                </span>
                                <div class="flex items-center text-sm text-secondary mt-2">
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Like
                                    </a>
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Reply
                                    </a>
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Hide replies
                                    </a>
                                    <span class="mr-2">&bull;</span>
                                    <span>17 min</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-start mt-8 ml-12">
                            <img
                                class="w-8 h-8 rounded-full mr-4"
                                src="assets/images/avatars/female-01.jpg"
                                alt="Card cover image">
                            <div class="flex flex-col mt-0.5">
                                <span>
                                    <b>Caroline Lundu</b> Yes!! Let's talk about it on lunch!
                                </span>
                                <div class="flex items-center text-sm text-secondary mt-2">
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Like
                                    </a>
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Reply
                                    </a>
                                    <span class="mr-2">&bull;</span>
                                    <span>15 min</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-start mt-8 ml-12">
                            <img
                                class="w-8 h-8 rounded-full mr-4"
                                src="assets/images/avatars/female-08.jpg"
                                alt="Card cover image">
                            <div class="flex flex-col mt-0.5">
                                <span>
                                    <b>Barbara Cotilla</b> Count me in !!!
                                </span>
                                <div class="flex items-center text-sm text-secondary mt-2">
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Like
                                    </a>
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Reply
                                    </a>
                                    <span class="mr-2">&bull;</span>
                                    <span>12 min</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-start mt-8">
                            <img
                                class="w-8 h-8 rounded-full mr-4"
                                src="assets/images/avatars/male-11.jpg"
                                alt="Card cover image">
                            <div class="flex flex-col mt-0.5">
                                <span>
                                    <b>Alan Marti</b> The color of the sky doesn’t look natural at all, do you really think this is natural? I’d say Photoshop!
                                    Your trip isn't going to worth it since you won't be seeing this exact sky.
                                </span>
                                <div class="flex items-center text-sm text-secondary mt-2">
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Like
                                    </a>
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Reply
                                    </a>
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Hide replies
                                    </a>
                                    <span class="mr-2">&bull;</span>
                                    <span>24 min</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-start mt-8 ml-12">
                            <img
                                class="w-8 h-8 rounded-full mr-4"
                                src="assets/images/avatars/female-01.jpg"
                                alt="Card cover image">
                            <div class="flex flex-col mt-0.5">
                                <span>
                                    <b>Caroline Lundu</b> Hey, Alan! You must be fun at parties!
                                </span>
                                <div class="flex items-center text-sm text-secondary mt-2">
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Like
                                    </a>
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Reply
                                    </a>
                                    <span class="mr-2">&bull;</span>
                                    <span>22 min</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-start mt-8 ml-12">
                            <img
                                class="w-8 h-8 rounded-full mr-4"
                                src="assets/images/avatars/male-11.jpg"
                                alt="Card cover image">
                            <div class="flex flex-col mt-0.5">
                                <span>
                                    <b>Alan Marti</b> Caroline, I'm telling the truth, and if you cannot stand the truth, maybe we shouldn't be friends anymore...
                                </span>
                                <div class="flex items-center text-sm text-secondary mt-2">
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Like
                                    </a>
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Reply
                                    </a>
                                    <span class="mr-2">&bull;</span>
                                    <span>20 min</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-start mt-8 ml-12">
                            <img
                                class="w-8 h-8 rounded-full mr-4"
                                src="assets/images/avatars/female-01.jpg"
                                alt="Card cover image">
                            <div class="flex flex-col mt-0.5">
                                <span>
                                    <b>Caroline Lundu</b> Dude! Relax! I'm just messing with you...
                                </span>
                                <div class="flex items-center text-sm text-secondary mt-2">
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Like
                                    </a>
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Reply
                                    </a>
                                    <span class="mr-2">&bull;</span>
                                    <span>18 min</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-start mt-8 ml-12">
                            <img
                                class="w-8 h-8 rounded-full mr-4"
                                src="assets/images/avatars/male-11.jpg"
                                alt="Card cover image">
                            <div class="flex flex-col mt-0.5">
                                <span>
                                    <b>Alan Marti</b> Sorry! I had a bad morning, let's talk about this in couple hours, I need to relax a bit :(
                                </span>
                                <div class="flex items-center text-sm text-secondary mt-2">
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Like
                                    </a>
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Reply
                                    </a>
                                    <span class="mr-2">&bull;</span>
                                    <span>16 min</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-start mt-8">
                            <img
                                class="w-8 h-8 rounded-full mr-4"
                                src="assets/images/avatars/female-05.jpg"
                                alt="Card cover image">
                            <div class="flex flex-col mt-0.5">
                                <span>
                                    <b>Marleah Eagleston</b> Count me in, too!
                                </span>
                                <div class="flex items-center text-sm text-secondary mt-2">
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Like
                                    </a>
                                    <a
                                        class="mr-2 hover:underline"
                                        [routerLink]="'./'">Reply
                                    </a>
                                    <span class="mr-2">&bull;</span>
                                    <span>34 min</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fuse-card>
        </div>

    </div>

</div>
